<template>
  <div class="demoBox">
    <div class="BoxHeader">
      <span>{{ message }}</span>
      <el-form :inline="true" v-model="dataPage" :rules="rules" label-width="80px" class="demo-form">
        <el-form-item label="姓名：" prop="name"><el-input v-model="dataPage.name"></el-input></el-form-item>
        <el-form-item label="电话：" prop="phone"><el-input v-model="dataPage.phone"></el-input></el-form-item>
      </el-form>
      <el-button type="primary">查询</el-button>
      <el-button @click="handleClear()">清空</el-button>
    </div>
    <custom-table :data="tableData" style="width: 100%;">
      <template v-slot:columns>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="phone" label="电话"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.$index,scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </template>

    </custom-table>
  <EditDialog v-if="isShowEdit" ref="editDialog" :isShowEdit="isShowEdit" @close="editDialogSwitch" :skipData="selPeople"></EditDialog>

  </div>
</template>


<script>
import EditDialog from './components/editDialog.vue'

export default {
  name: 'Demo1',
  components: {
    EditDialog
  },
  data() {
    return {
      message: 'Hello, Vue!',
      isShowEdit: false,
      dataPage: {
        name: '',
        phone: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur,change' }
        ],
        phone: [
          { required: true, message: '请输入电话', trigger: 'blur,change' }
        ]
      },
      // 表格
      tableData: [
        {
          name: '有折扣',
          phone: '1'
        },
        {
          name: '有折扣',
          phone: '12'
        },
        {
          name: '有折扣',
          phone: '123'
        },
        {
          name: '有折扣',
          phone: '1234'
        },
        {
          name: '有折扣',
          phone: '12345'
        },
        {
          name: '有折扣',
          phone: '123456'
        }
      ],
      selPeople: {}
    }
  },
  methods: {
    handleClear() {
      this.dataPage.name = '';
      this.dataPage.phone = '';
    },
    handleEdit(index, row) {
      this.selPeople = row;
      console.log(this.selPeople, '编辑');
      this.isShowEdit = true
    },
      // 新增弹窗关闭
    editDialogSwitch() {
      this.isShowEdit = false;
    },
  }
}
</script>

<style scoped lang="scss">
.demoBox {
  .BoxHeader {
    display: flex;
    align-items: center;

    .el-form {
      display: flex;
      align-items: center;

      .el-form-item {
        margin: 0;
      }
    }
  }
}
</style>